<template>
  <div>
    <p>
      每次+1: <button @click="increment">+</button>
      数字: {{ add }}
    </p>
    <p>
      每次-1: <button @click="reduction">-</button>
      数字: {{ reduce }}
    </p>
  </div>
</template>

<script setup>
    import { useStore } from './store'
    import { storeToRefs } from 'pinia'

    const store = useStore()
    const { add, reduce } = storeToRefs(store)
    const increment = () => {
      store.increase()
    }
    const reduction = () => {
      store.decrease()
    }
</script>

<style scoped>
   button {
    background: aquamarine;
   }
</style>